<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客编辑</title>
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <link href="/imgs/favicon.ico" rel="shortcut icon">

    <link th:href="@{/admin/plugins/tagsinput/jquery.tagsinput.css}" rel="stylesheet"/>
    <link th:href="@{/admin/plugins/select2/select2.css}" rel="stylesheet"/>
    <link rel="shortcut icon" th:href="@{/admin/dist/img/favicon.png}"/>
    <link rel="stylesheet" th:href="@{/admin/dist/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/admin/dist/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/admin/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/admin/plugins/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <link rel="stylesheet" th:href="@{/admin/plugins/jqgrid-5.3.0/ui.jqgrid-bootstrap4.css}"/>
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/admin/dist/css/adminlte.min.css}">

    <style>
        /*需要复制*/
        body{
            text-align: center;
        }
        .header .layui-nav{
            display: inline-block;
            float: right;
        }
        .logo{
            position: absolute;
            left: 0px;
            font-size: 35px;
            color: lightblue;
        }
        .layui-nav{
            border-radius: 0px;
        }
        .layui-header{
            position: fixed;
            width: 100%;
        }
        .layui-side{
            top:60px;
        }
        .layui-tab{
            margin-left: 200px;
            margin-top: 80px;
        }
        .layui-tab-title{
            font-size: 30px;
            margin: 30px;
        }
        .layui-body{
            position: relative;
            left: 0;
            padding: 30px;
            margin-top: -59px;
        }
        .layui-body a:hover{
            color: #555;
        }

        .layui-card{
            border: 1px solid;
            padding: 20px;
        }
        .CodeMirror-gutters{
            width: 32px;
        }
        .content-wrapper{
            margin-left: 0;
        }

        /*footer的样式（需要复制)*/
        .layui-footer {
            position: fixed;
            height: 50px;
            left: 200px;
            right: 0;
            bottom: 0;
            background-color: gainsboro;
            z-index: 1000;
        }
        .layui-main{
            width: 100%;
        }
        .footer-demo{
            line-height: 45px;
            margin: 0px;
        }
        .footer-demo p{
            display: inline-block;
            vertical-align: middle;
            padding-right: 10px;
        }
        .a{
            margin-left: -25px;
        }
        .layui-icon{
            margin-right: 10px;
        }
        .CodeMirror-linenumber{
            width: 25px;
        }
    </style>

    <style>
        .markdown-body li{
            list-style: unset;
        }
    </style>

    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script src="/js/kawai.js"></script><!--必须在后面-->

</head>
<body>

<link href="/admin/plugins/editormd/css/editormd.css" rel="stylesheet"/>


<div class="layui-layout layui-layout-admin">

    <div class="layui-header header header-demo" spring="">
        <div class="layui-main">

            <div class="layui-nav" th:replace="~{commons/commons::topbar}"></div>
        </div>
    </div>
</div>



<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <div th:replace="~{commons/commons::sidebar(itemed='index.html')}"></div>
    </div>
</div>

<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        <li class="layui-this" style="font-size: 20px;margin-bottom: 15px">
            博客发布
        </li>
    </ul>
    <div class="layui-body"><!--body写在这-->

        <div class="wrapper">

            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <div class="content-header">
                    <div class="container-fluid">
                    </div><!-- /.container-fluid -->
                </div>
                <!-- Main content -->
                <div class="content">
                    <div class="container-fluid">
                        <div class="card card-primary card-outline">
                            <div class="card-body">
                                <!-- 几个基础的输入框，名称、分类等输入框 -->
                                <form id="blogForm" onsubmit="return false;">
                                    <input id="url" name="url" th:value="${blog!=null}?${blog.getUrl()}:${dir}" hidden>
                                    <div class="form-group" style="display:flex;">
                                        <input type="hidden" id="token" name="token" th:if="${token != null}" th:value="${token}">
                                        <input type="hidden" id="id" name="id" th:value="${blog!=null and blog.getId()!=null }?${blog.getId()}: null">
                                        <input type="text" class="form-control col-sm-6" id="title" name="title"
                                               th:value="${blog != null && blog.getTitle() != null}?${blog.getTitle()}:''"
                                               placeholder="*请输入文章标题(必填)"
                                               required="true">
                                        &nbsp;&nbsp;
                                        <input type="text" class="form-control" id="tags" name="tags"
                                               th:value="${blog != null && blog.getTags() !=null}?${blog.getTags()}:''"
                                               placeholder="请输入文章标签"
                                               style="width: 100%;">
                                    </div>
                                    <div class="form-group" style="display:flex;">
                                        <div class="form-control col-sm-6">
                                            <img th:src="@{${blog!=null}?'/images/blogs/header/'+${blog.getImage()}:''}" id="blogImg" width="240" height="150">
                                            <input th:value="${blog!=null}?${blog.getImage()}:''" id="img" name="image" hidden>
                                            <div style="float: right;padding-top: 20px;">
                                                <button id="randomImg" class="layui-btn layui-btn-lg layui-btn-normal">随机封面</button>
                                                <button style="display: block;margin-left: 0;margin-top: 10px;"
                                                        type="button" class="layui-btn layui-btn-normal" id="test1">
                                                    <i class="layui-icon">&#xe67c;</i>添加封面
                                                </button>
                                            </div>
                                        </div>
                                        <select class="form-control select2" style="width: 100%;margin-left: 8px" id="blogCategoryId" name="categoryId" data-placeholder="请选择分类..." >
                                            <option th:if="${categories != null}" th:each="category : ${categories}"
                                                    th:selected="${blog != null&&category.getId() == blog.getCatagory().getId()}?true:false"
                                                    th:value="${category.getId()}" th:text="${category.getName()}">
                                            </option>
                                            <option th:if="${categories == null}" th:value="0" >默认分类</option>
                                        </select>
                                    </div>
                                    <div class="form-group" id="blog-editormd">
                                <textarea style="display:none;" id="content" name="content"
                                          th:utext="${blog != null && blog.getContent() != null}?${blog.getContent()}:''"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <!-- 按钮 -->
                                        &nbsp;<button class="btn btn-info float-left" style="margin-left: 5px;" id="save_btn">保存文章</button>&nbsp;
                                        &nbsp;<button class="btn btn-secondary float-left" style="margin-left: 5px;"
                                                      id="cancel_btn"><a href="/admin/blogs" style="color: white">返回文章列表</a>
                                    </button>&nbsp;
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div><!-- /.container-fluid -->
                </div>
            </div>


        </div>


    </div>
</div>


<div th:replace="~{commons/commons::footer}"></div>


<script src="/js/public.js"></script>

<!-- jQuery必须要 -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>



<!-- editor.md必须要 -->
<script th:src="@{/admin/plugins/editormd/editormd.min.js}"></script>
<!-- tagsinput必须要 -->
<script th:src="@{/admin/plugins/tagsinput/jquery.tagsinput.min.js}"></script>
<!-- Select2必须要 -->
<script th:src="@{/admin/plugins/select2/select2.full.min.js}"></script>


<!--必须要-->
<script src="/js/edit.js"></script>

<script src="/js/uploadImg.js"></script>


<!--model层-->
<style>
    .layui-form-label{
        width: 150px;
    }
    .layui-input-block{
        width: 70%;
        margin-left: 170px;
        margin-right: 100px;
        margin-top: 100px;
    }
</style>
<script id="save_model" type="text/html">
    <form id="save_form" style="padding: 10px" class="layui-form" onsubmit="return false;">
        <div class="layui-form-item">
            <label>状态</label>
            <input type="radio" name="status" value="0" title="草稿" th:checked="${blog==null || blog.getStatus()!=1}?true:false">
            <input type="radio" name="status" value="1" title="发布" th:checked="${blog!=null && blog.getStatus()==1}">
        </div>
        <div class="layui-form-item">
            <label>是否允许评论</label>
            <input type="radio" name="encomment" value="0" title="是" th:checked="${blog==null || blog.getEnComment()!=1}?true:false">
            <input type="radio" name="encomment" value="1" title="否" th:checked="${blog!=null && blog.getEnComment()==1}">
        </div>
    </form>
</script>

</body>
</html>
